import React, { Component } from "react";
import { deepCopy, messages } from "share/common";
import { Button, Col, Row } from "antd";
import "styles/dashboard/component-switcher.scss";

const NameMap = {
  2: messages("basic-1.key205") /*快速新建*/,
  0: messages("basic-1.key134") /*公告*/,
  3: messages("basic-1.key111") /*单据动态*/,
  9: messages("basic-1.key105") /*商务出行*/,
  5: messages("basic-1.key120") /*报表*/,
  8: messages("basic-1.key102") /*商务卡*/,
};

class ComponentSwitcher extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      layout: [],
    };
  }

  componentWillMount() {
    this.setState({
      layout: this.props.params.layout,
    });
  }

  componentWillReceiveProps(nextProps) {
    this.setState({ layout: nextProps.params.layout });
  }

  toggleBox = (key, show) => {
    const { layout } = this.state;
    const layoutTemp = deepCopy(layout);
    layoutTemp.map((item) => {
      if (item.key === key) {
        item.show = !show;
      }
      return item;
    });
    this.setState({ layout: layoutTemp });
  };

  render() {
    const { layout } = this.state;
    const slideContent = [];
    const newHomeKeyList = ["0", "2", "3", "5", "8", "9"];
    const showList = layout.filter((item) => {
      return newHomeKeyList.includes(item.key);
    });
    showList.map((item, index) => {
      layout[index].removable &&
        slideContent.push(
          <Col span={8} key={index}>
            <div
              className={`module-list ${item.show ? "show-item" : "hide-item"}`}
              onClick={() => this.toggleBox(item.key, item.show)}
            >
              {NameMap[item.key]}
            </div>
          </Col>
        );
    });
    return (
      <div className="dragger-slide">
        <Row gutter={16}>{slideContent}</Row>
        <div className="slide-footer">
          <Button type="primary" onClick={() => this.props.close(layout)}>
            {messages("common.save") /*保存*/}
          </Button>
          <Button onClick={() => this.props.close()}>{messages("common.cancel") /*取消*/}</Button>
        </div>
      </div>
    );
  }
}

export default ComponentSwitcher;
